<template>
  <up-overlay :show="showOverlay">
    <view class="h-full flex items-center justify-center overflow-auto">
      <view class="wx-box-warp flex flex-col items-center">
        <view class="wx-content flex flex-col">
          <image class="text-bg" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/end_bg.png" />

          <view class="wx-title flex flex-col">
            <text>添加老师微信</text>
            <text>{{ type === 1 ? '获取专业指导及建议' : type === 2 ? '报名托管课程' : '了解VIP权益' }}</text>
          </view>

          <view class="wx-wrap flex flex-1 flex-col items-center">
            <image class="wx-code" :src="userStore.teacher_ewm" mode="aspectFill" @click="previewImage" />

            <text class="wx-info">
              长按二维码添加老师微信，{{ type === 1 ? '获取一对一阅读指导' : type === 2 ? '报名托管课程' : '有机会获取VIP权益' }}
            </text>

            <!-- <up-copy class="btn-wrap" content="uview-plus is great !">
              <view class="wx-btn">
                复制
              </view>
            </up-copy> -->
          </view>
        </view>

        <image class="close-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_close.png" @click="handleClose" />
      </view>
    </view>
  </up-overlay>
</template>

<script lang="ts" setup name="ContactTeacher">
import { useUserStore } from '@/store';

defineProps({
  showOverlay: {
    type: Boolean,
    default: false,
  },

  type: {
    type: Number,
    default: 1, // 1-阅读 2-托管 3-vip
  },
});

const emit = defineEmits(['update:showOverlay']);

const userStore = useUserStore();
const handleClose = () => {
  emit('update:showOverlay', false);
};

const previewImage = (e: any) => {
  console.log('e', e);
  uni.previewImage({
    // 需要预览的图片链接列表
    urls: [userStore.teacher_ewm],
    // 图片指示器样式
    indicator: 'default',
    // 是否可循环预览
    loop: false,
    // 长按图片显示操作菜单，如不填默认为保存相册
    // longPressActions:{
    // itemList:[this.l('发送给朋友'),this.l]
    // },
    success: (res) => {
      console.log('res', res);
    },
    fail: (err) => {
      console.log('err', err);
    },
  });
};
</script>

<style lang="scss" scoped>
.wx-box-warp {
  position: relative;
  width: 750rpx;
  height: 1230rpx;
  padding: 148rpx 40rpx 16rpx 40rpx;

  .wx-content {
    position: relative;
    width: 670rpx;
    height: 940rpx;
    padding: 66rpx 32rpx 32rpx 32rpx;

    .text-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 670rpx;
      height: 940rpx;
    }

    .wx-title {
      position: relative;
      font-size: 36rpx;
      line-height: 50rpx;
      font-weight: 500;
      color: #fff;
      z-index: 1;
    }

    .wx-wrap {
      position: relative;
      margin-top: 18rpx;
      width: 100%;
      height: 680rpx;
      padding: 32rpx 70rpx;
      background: #fff;
      border-radius: 24rpx;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .wx-code {
        width: 280rpx;
        height: 280rpx;
        border-radius: 16rpx;
        background: #D9D9D9;
      }

      .wx-name {
        margin: 32rpx 0;
        font-size: 32rpx;
        line-height: 48rpx;
        color: #333;
      }

      .wx-info {
        margin: 32rpx 0;
        font-size: 32rpx;
        line-height: 44rpx;
        color: #333;
      }

      .btn-wrap {
        width: 100%;
      }

      .wx-btn {
        width: 100%;
        margin-top: 32rpx;
        font-size: 32rpx;
        line-height: 96rpx;
        color: #FFA029;
        text-align: center;
        background: #fff;
        border: 2rpx solid #FFA029;
        border-radius: 48rpx;
      }
    }
  }

  .close-icon {
    position: relative;
    margin-top: 62rpx;
    width: 64rpx;
    height: 64rpx;
    z-index: 1;
  }
}
</style>
